<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="刘清政">
  <meta name="keyword" content="hexo-theme">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      如何写好接口文档 | Justin-刘清政的博客
    
  </title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/plugins/gitment.css">

  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
    
<script src="/js/gitment.js"></script>

  
  

  
<meta name="generator" content="Hexo 4.2.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>Justin-刘清政的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于我</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于我</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <div id="article-banner">
  <h2>如何写好接口文档</h2>



  <p class="post-date">2020-02-10</p>
    <!-- 不蒜子统计 -->
    <span id="busuanzi_container_page_pv" style='display:none' class="">
        <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
    </span>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h1 id="如何写好接口文档"><a href="#如何写好接口文档" class="headerlink" title="如何写好接口文档"></a>如何写好接口文档</h1><h1 id="1-HTTP携带信息的方式"><a href="#1-HTTP携带信息的方式" class="headerlink" title="1 HTTP携带信息的方式"></a>1 HTTP携带信息的方式</h1><ul>
<li>url</li>
<li>headers</li>
<li>body: 包括请求体，响应体</li>
</ul>
<h1 id="2-分离通用信息"><a href="#2-分离通用信息" class="headerlink" title="2 分离通用信息"></a>2 分离通用信息</h1><p>一般来说，headers里的信息都是通用的，可以提前说明，作为默认参数</p>
<h1 id="3-路径中的参数表达式"><a href="#3-路径中的参数表达式" class="headerlink" title="3 路径中的参数表达式"></a>3 路径中的参数表达式</h1><p>URL中参数表达式使用<a href="https://github.com/janl/mustache.js" target="_blank" rel="noopener">mustache</a>的形式，参数包裹在双大括号之中<code></code></p>
<p>例如：</p>
<ul>
<li><code>/api/user/</code></li>
<li><code>/api/user/?age=&amp;gender=</code></li>
</ul>
<h1 id="4-数据模型定义"><a href="#4-数据模型定义" class="headerlink" title="4 数据模型定义"></a>4 数据模型定义</h1><p>数据模型定义包括：</p>
<ul>
<li>路径与查询字符串参数模型</li>
<li>请求体参数模型</li>
<li>响应体参数模型</li>
</ul>
<p>数据模型的最小数据集：</p>
<ul>
<li>名称</li>
<li>是否必须</li>
<li>说明</li>
</ul>
<blockquote>
<p>“最小数据集”（MDS）是指通过收集最少的数据，较好地掌握一个研究对象所具有的特点或一件事情、一份工作所处的状态，其核心是针对被观察的对象建立起一套精简实用的数据指标。最小数据集的概念起源于美国的医疗领域。最小数据集的产生源于信息交换的需要，就好比上下级质量技术监督部门之间、企业与质量技术监督部门之间、质量技术监督部门与社会公众之间都存在着信息交换的需求。</p>
</blockquote>
<p>一些文档里可能会加入字段的类型，但是我认为这是没必要的。以为HTTP传输的数据往往都需要序列化，大部分数据类型都是字符串。一些特殊的类型，例如枚举类型的字符串，可以在说明里描述。</p>
<p>另外：<code>数据模型非常建议使用表格来表现</code>。</p>
<p>举个栗子?：</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>是否必须</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>userType</td>
<td>是</td>
<td>用户类型。<code>commom</code>表示普通用户，<code>vip</code>表示vip用户</td>
</tr>
<tr>
<td>age</td>
<td>否</td>
<td>用户年龄</td>
</tr>
<tr>
<td>gender</td>
<td>否</td>
<td>用户性别。<code>1</code>表示男，<code>0</code>表示女</td>
</tr>
</tbody></table>
<h1 id="5-请求示例"><a href="#5-请求示例" class="headerlink" title="5 请求示例"></a>5 请求示例</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; general </span><br><span class="line">POST http:&#x2F;&#x2F;www.testapi.com&#x2F;api&#x2F;user</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; request payload</span><br><span class="line">&#123;</span><br><span class="line">    &quot;name&quot;: &quot;qianxun&quot;,</span><br><span class="line">    &quot;age&quot;: 14,</span><br><span class="line">    &quot;like&quot;: [&quot;music&quot;, &quot;reading&quot;],</span><br><span class="line">    &quot;userType&quot;: &quot;vip&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; response</span><br><span class="line">&#123;</span><br><span class="line">    &quot;id&quot;: &quot;asdkfjalsdkf&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="6-异常处理"><a href="#6-异常处理" class="headerlink" title="6 异常处理"></a>6 异常处理</h1><p>异常处理最小数据集</p>
<ul>
<li>状态码</li>
<li>说明</li>
<li>解决方案</li>
</ul>
<p>举个栗子?：</p>
<table>
<thead>
<tr>
<th>状态码</th>
<th>说明</th>
<th>解决方案</th>
</tr>
</thead>
<tbody><tr>
<td>401</td>
<td>用户名密码错误</td>
<td>检查用户名密码是否正确</td>
</tr>
<tr>
<td>424</td>
<td>超过最大在线数量</td>
<td>请在控制台修改最大在线数量</td>
</tr>
</tbody></table>
<p>之前我一直不想把解决方案加入异常处理的最小数据集，但是对于很多开发者来说，即使它知道<code>424</code>代表<code>超过最大在线数量</code>。如果你不告诉如果解决这个问题，那么他们可能就会直接来问你。所以最好能够一步到位，直接告诉他应该如何解决，这样省时省力。</p>
<h1 id="7-如何组织？"><a href="#7-如何组织？" class="headerlink" title="7 如何组织？"></a>7 如何组织？</h1><h2 id="7-1-一个创建用户的例子：创建用户"><a href="#7-1-一个创建用户的例子：创建用户" class="headerlink" title="7.1 一个创建用户的例子：创建用户"></a>7.1 一个创建用户的例子：创建用户</h2><p><strong>1 请求示例</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; general </span><br><span class="line">POST http:&#x2F;&#x2F;www.testapi.com&#x2F;api&#x2F;user&#x2F;vip&#x2F;?token&#x3D;abcdefg</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; request payload</span><br><span class="line">&#123;</span><br><span class="line">    &quot;name&quot;: &quot;qianxun&quot;,</span><br><span class="line">    &quot;age&quot;: 14,</span><br><span class="line">    &quot;like&quot;: [&quot;music&quot;, &quot;reading&quot;]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; response</span><br><span class="line">&#123;</span><br><span class="line">    &quot;id&quot;: &quot;asdkfjalsdkf&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>2 路径与查询字符串参数模型</strong><br><code>POST http://www.testapi.com/api/user//?token=</code></p>
<table>
<thead>
<tr>
<th>名称</th>
<th>是否必须</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>userType</td>
<td>是</td>
<td>用户类型。<code>commom</code>表示普通用户，<code>vip</code>表示vip用户</td>
</tr>
<tr>
<td>token</td>
<td>是</td>
<td>认证令牌</td>
</tr>
</tbody></table>
<p><strong>3 请求体参数模型</strong></p>
<table>
<thead>
<tr>
<th>名称</th>
<th>是否必须</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>name</td>
<td>是</td>
<td>用户名。4-50个字符</td>
</tr>
<tr>
<td>age</td>
<td>否</td>
<td>年龄</td>
</tr>
<tr>
<td>like</td>
<td>否</td>
<td>爱好。最多20个</td>
</tr>
</tbody></table>
<p><strong>4 响应体参数模型</strong></p>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>id</td>
<td>用户id</td>
</tr>
</tbody></table>
<p><strong>5 异常处理</strong></p>
<table>
<thead>
<tr>
<th>状态码</th>
<th>说明</th>
<th>解决方案</th>
</tr>
</thead>
<tbody><tr>
<td>401</td>
<td>token过期</td>
<td>请重新申请token</td>
</tr>
<tr>
<td>424</td>
<td>超过最大在创建人数</td>
<td>请在控制台修改最大创建人数</td>
</tr>
</tbody></table>
<h2 id="7-2-这样组织的原因"><a href="#7-2-这样组织的原因" class="headerlink" title="7.2 这样组织的原因"></a>7.2 这样组织的原因</h2><ol>
<li><code>请求示例</code>: 请求示例放在第一位的原因是，要用<code>最快的方式</code>告诉开发者，这个接口应该如何请求</li>
<li><code>路径与查询字符串参数模型</code>： 使用<code>mustache</code>包裹参数</li>
<li><code>请求体参数模型</code>：如果没有请求体，可以不写</li>
<li><code>响应体参数模型</code>：</li>
<li><code>异常处理</code></li>
</ol>
<h1 id="8-文档提供的形式"><a href="#8-文档提供的形式" class="headerlink" title="8 文档提供的形式"></a>8 文档提供的形式</h1><p>文档建议由一下两种形式，<code>在线文档</code>，<code>pdf文档</code>。</p>
<ul>
<li><code>在线文档</code><ul>
<li>更新方便</li>
<li>易于随时阅读</li>
<li>易于查找</li>
</ul>
</li>
<li><code>pdf文档</code><ul>
<li>内容表现始终如一，不依赖文档阅读器</li>
<li>文档只读，不会被轻易修改</li>
</ul>
</li>
</ul>
<p>其中由于是面对第三方开发者，<code>公开的在线文档必须提供</code>；由于某些特殊的原因，可能需要提供文件形式的文档，建议提供pdf文档。当然，以下的文档形式是<code>非常不建议</code>提供的：</p>
<ul>
<li>word文档</li>
<li>markdown文档</li>
</ul>
<p>word文档和markdown文档有以下缺点：</p>
<ul>
<li><code>文档的表现形式非常依赖文档查看器</code>：各个版本的word文档对word的表现形式差异很大，可能在你的电脑上内容表现很好的文档，到别人的电脑上就会一团乱麻；另外markdown文件也是如此。而且markdown中引入文件只能依靠图片链接，如果文档中含有图片，很可能会出现图片丢失的情况。</li>
<li><code>文档无法只读</code>：文档无法只读，就有可能会被第三方开发者在不经意间修改，那么文档就无法保证其准确性了。</li>
</ul>
<p>总结一下，文档形式的要点：</p>
<ul>
<li><code>只读性</code>：保证文档不会被开发者轻易修改</li>
<li><code>一致性</code>：保证文档在不同设备，不同文档查看器上内容表现始终如一</li>
<li><code>易于版本管理</code>：文档即软件（DAAS: Document as a Software），一般意义上说<code>软件 = 数据 + 算法</code>, 但是我认为<code>文档也是一种组成软件的重要形式</code>。既然软件需要版本管理，文档的版本管理也是比不可少的。</li>
</ul>
</section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#随笔" >
    <span class="tag-code">随笔</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/article/1/01-%E6%8E%A5%E5%8F%A3%E7%9A%84%E5%B9%82%E7%AD%89%E6%80%A7/">
        <span class="nav-arrow">← </span>
        
          接口的幂等性
        
      </a>
    
    
      <a class="nav-right" href="/article/1/05-CGI,FastCGI,WSGI,uWSGI,uwsgi%E4%B8%80%E6%96%87%E6%90%9E%E6%87%82/">
        
          CGI, FastCGI, WSGI, uWSGI, uwsgi一文搞懂
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">点击上方按钮,请我喝杯咖啡！</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Gitment START -->
      <div id="comments"></div>
      <!-- Gitment END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
  <!-- 不蒜子统计 -->
    <strong class="toc-title">目录</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#如何写好接口文档"><span class="toc-nav-text">如何写好接口文档</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#1-HTTP携带信息的方式"><span class="toc-nav-text">1 HTTP携带信息的方式</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#2-分离通用信息"><span class="toc-nav-text">2 分离通用信息</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#3-路径中的参数表达式"><span class="toc-nav-text">3 路径中的参数表达式</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#4-数据模型定义"><span class="toc-nav-text">4 数据模型定义</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#5-请求示例"><span class="toc-nav-text">5 请求示例</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#6-异常处理"><span class="toc-nav-text">6 异常处理</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#7-如何组织？"><span class="toc-nav-text">7 如何组织？</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-1-一个创建用户的例子：创建用户"><span class="toc-nav-text">7.1 一个创建用户的例子：创建用户</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-2-这样组织的原因"><span class="toc-nav-text">7.2 这样组织的原因</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#8-文档提供的形式"><span class="toc-nav-text">8 文档提供的形式</span></a></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://www.liuqingzheng.top/article/1/02-如何写好接口文档/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== 'http://file.muyutech.com/error-img.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>



  <script>
    var gitmentConfig = "liuqingzheng";
    if (gitmentConfig !== 'undefined') {
      var gitment = new Gitment({
        id: "如何写好接口文档",
        owner: "liuqingzheng",
        repo: "FuckBlog",
        oauth: {
          client_id: "32a4076431cf39d0ecea",
          client_secret: "94484bd79b3346a949acb2fda3c8a76ce16990c6"
        },
        theme: {
          render(state, instance) {
            const container = document.createElement('div')
            container.lang = "en-US"
            container.className = 'gitment-container gitment-root-container'
            container.appendChild(instance.renderHeader(state, instance))
            container.appendChild(instance.renderEditor(state, instance))
            container.appendChild(instance.renderComments(state, instance))
            container.appendChild(instance.renderFooter(state, instance))
            return container;
          }
        }
      })
      gitment.render(document.getElementById('comments'))
    }
  </script>




    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
<!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
     本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
     本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



  <p class="copyright">
    &copy; 2021 | Proudly powered by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank">小猿取经</a>
    <br>
    Theme by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank" rel="noopener">小猿取经</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>





<!-- Baidu Tongji -->

<script>
    var _baId = 'c5fd96eee1193585be191f318c3fa725';
    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script src="/js/script.js"></script>


<script src="/js/search.js"></script>


<script src="/js/load.js"></script>



  <span class="local-search local-search-google local-search-plugin" style="right: 50px;top: 70px;;position:absolute;z-index:2;">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <div id="local-search-result" class="local-search-result-cls"></div>
  </span>


  </body>
</html>